<!-- 瀑布流布局 -->
<template>
  <view class="container">
    <custom-waterfalls-flow ref="waterfallsFlowRef" :value="flowData.list" imageKey="images">
      <template v-slot:default="item">
        <view class="item-box" @click="handleDetails(item.id)">
          <!-- <view class="item-img">
            <image :src="item.bannerList[0]" mode="widthFix" lazy-load @load="imgLoad(item)" @error="imgError(item)" />
            <image :src="item.image" mode="widthFix"/>
            <image src="../../static/ar.png"/>
          </view> -->
          <view class="item-title">{{item.title}}</view>
          <!-- <view class="item-auth">
            <view class="auth-name">
              <image :src="item.userAvatar" />
              <text>{{item.userName}}</text>
            </view>
            <view class="like-num" @click.stop="changeLike(item.id,item.isLike)">
              <image v-if="item.isLike" src="../../static/like.png"/>
              <image v-else src="../../static/no-like.png"/>
              <text>{{item.likes}}</text>
            </view>
          </view> -->
        </view>
      </template>
    </custom-waterfalls-flow>


    <!-- <view
      :id="`cont_${index + 1}`"
      class="cont-box"
      :style="{ width: widthCalc, 'margin-left': index === 0 ? 0 : marginCalc }"
      v-for="(numVal, index) in flowData.column"
      :key="numVal">
      <view class="item-box" v-for="(item, j) in flowData[`column_${index + 1}`]" :key="j" @click="handleDetails(item.id)">
        <view class="item-img">
          <image :src="item.bannerList[0]" mode="widthFix" lazy-load @load="imgLoad(item)" @error="imgError(item)" />
          <image :src="item.bannerList[0]" mode="widthFix" lazy-load />
          <image src="../../static/ar.png"/>
        </view>
        <view class="item-title">{{item.title}}</view>
        <view class="item-auth">
          <view class="auth-name">
            <image :src="item.userAvatar" />
            <text>{{item.userName}}</text>
          </view>
          <view class="like-num" @click.stop="changeLike(item.id,item.isLike)">
            <image v-if="item.isLike" src="../../static/like.png"/>
            <image v-else src="../../static/no-like.png"/>
            <text>{{item.likes}}</text>
          </view>
        </view>
      </view>
    </view> -->

  </view>
</template>
 
<script setup>
  import { ref,reactive, computed, getCurrentInstance, onMounted,watch,nextTick } from "vue";
	import { artSaveLike } from '@/api/posting.js'
	import request from '@/http/request.js';
  const props = defineProps(['dataList'])
  const emit = defineEmits([
		"refresh",
	]);

  const waterfallsFlowRef = ref(null);

  const _this = getCurrentInstance();
  const flowData = reactive({
    list: [
      
    ], // 数据值
  });

  watch(() => props.dataList,(v) => {
    flowData.list = JSON.parse(JSON.stringify(v)).map(res => {
      return {...item,images:item.bannerList[0]}
    })
    console.log('flowData.list',flowData.list)
    // waterfallsFlowRef.value.refresh();
  })




  // 查看详情
	const handleDetails = (id) => {
		uni.navigateTo({
			url:`/pages/postDetails/index?id=${id}`
		})
	}

	//帖子点赞
  const changeLike = async (id,isLike) => {
		let res = await artSaveLike({
			dataId:id,
			status:isLike ? 2 : 1,  //1点赞  2 取消点赞
			type:1    	//类型:1帖子,2评论
		})
    emit('refresh',() => {
			uni.showToast({
				title: isLike?'已取消点赞':'点赞成功',
				icon:'none',
				duration: 2000
			});
		})
	}


</script>
 
<style lang="scss" scoped>
.container {
  /* height: calc(100vh - (var(--status-bar-height) + 216rpx));
	height: calc(100vh - (var(--status-bar-height) + 216rpx + env(safe-area-inset-bottom))); */
  height: auto;
  /* background-color: #F4F4F4; */
  padding: 0 10rpx;
  
  .cont-box {
    float: left;
    overflow: hidden;
    .item-box {
      width: 100%;
      padding-bottom: 24rpx;
			margin-bottom: 10rpx;
      background-color: white;
      .item-img{
				width: 360rpx;
				height: 480rpx !important;
        position: relative;

        image:nth-of-type(1){
          width: 100%;
          height: 100% !important;
        }
        image:nth-of-type(2){
          width: 46rpx;
          height: 46rpx;
          position: absolute;
          right: 10rpx;
          bottom: 10rpx;
        }
			}
			.item-title{
				width: 326rpx;
				font-weight: 400;
				font-size: 28rpx;
				color: #333333;
				margin: 24rpx 0 24rpx 17rpx;
        /* word-break: break-all; */
        /* white-space: nowrap;  */
        /* word-break: keep-all;  防止单词或连续数字在中间换行。 */
				@include text-overflow-many(2);
			}
			.item-auth{
				width: 326rpx;
				height: 36rpx;
				/* border: 1rpx solid red; */
				margin-left: 17rpx;
				@include flex(row,space-between);
				.auth-name{
					@include flex(row,flex-start);
					image{
						width: 36rpx;
						height: 36rpx;
						border-radius: 18rpx;
						margin-right: 12rpx;
					}
					text{
						font-weight: 400;
						font-size: 22rpx;
						color: #666666;
					}
				}
				.like-num{
					@include flex(row,flex-end);
					image{
						width: 28rpx;
						height: 28rpx;
						margin-right: 4rpx;
					}
					text{
						font-weight: 400;
						font-size: 22rpx;
						color: #666666;
					}
				}
			}
    }
  }
}

</style>